<!--  -->
<template>
	<div>
		<div class="content">
			<el-row :gutter="20">
				<el-row class="rowall">
					<el-col :xs="15" :sm="12" :md="14" :lg="14" :xl="14" class="col-left"
						><div class="grid-content bg-purple">
							<el-card class="box-card">
								<div class="text item">
									<P class="p1">欢迎分销商名称！今天是2021年3月25号，星期四，预祝大卖！</P>
									<p class="p2">企业编号【100001】<span>上次登录时间：2021-03-25 21:22:52</span></p>
								</div>
							</el-card>
							<div></div>
							<el-row class="tow-cont">
								<el-col class="box-left">
									<el-card shadow="always" class="box-card">
										<div class="card">
											<div class="card-tit">我的钱包</div>
											<diV class="card-sum">
												全部金额
												<p>￥100000</p>
											</diV>
											<div class="charts-l">
												<div class="chart" id="roundedChart"></div>
												<div class="chart-r-ut"></div>
											</div>
											<div class="btn-group">
												<el-button type="primary" class="btn">充值</el-button>
												<el-button class="btn">提现</el-button>
											</div>
										</div>
									</el-card>
								</el-col>
								<el-col></el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5" class="elc-r"
						><div class="grid-content bg-purple-light"></div
					></el-col>
				</el-row>
			</el-row>
		</div>
	</div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';
// import Header from "../components/nav/topNav"
export default {
	name: 'Home',
	//import引入的组件需要注入到对象中才能使用
	components: {
		// Header
	},
	data() {
		//这里存放数据
		return {
			chartPie: null,
		}
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {},
	//方法集合
	methods: {
		chartround() {},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.$nextTick(() => {
			// this.chartround()
		})
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.content {
	padding: 30px 0 0 0;
}
.bg-purple-light {
	background: #e5e9f2;
	padding: 0 50px;
}
/deep/ .rowall {
	.col-left {
		margin: 0 50px;
		.box-card {
			box-shadow: 6px 6px 5px #888888;
		}
		.text {
			padding-top: 20px;
			.p1 {
				text-align: center;
				font-size: 18px;
				color: #000;
				line-height: 40px;
			}
			.p2 {
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				span {
					color: rgb(71, 70, 70);
				}
			}
		}
		.tow-cont {
			padding-top: 20px;
			.box-left {
				width: 220px;
				height: 260px;
				/deep/ .el-card {
					width: 100%;
					height: 100%;
				}
				.el-card__body {
					padding: 0;
				}
				.card-tit {
					width: 100%;
					height: 30px;
					background: #f2f2f2;
					line-height: 30px;
					padding-left: 10px;
				}
				.card-sum {
					width: 100%;
					height: 30px;
					line-height: 30px;
					display: flex;
					padding: 10px;
					p {
						color: #7ca4d2;
						font-size: 18px;
						font-weight: 600;
						padding-left: 20px;
					}
				}
				.charts-l {
					width: 170px;
					height: 110px;
					background: rgb(197, 189, 189);
					margin: 20px 0 20px 10px;
					.chart {
						width: 80px;
						height: 80px;
					}
				}
				.btn-group {
					display: flex;
					justify-content: center;
					.btn {
						width: 50px;
						height: 30px;
						padding: 0;
						span {
							text-align: center;
							line-height: 30px;
						}
						.btn:first-child {
							margin-right: 20px;
						}
					}
				}
			}

			.card {
				width: 100%;
				height: 100%;
			}
			.box-card {
				box-shadow: 6px 6px 5px #888888;
			}
		}
	}
	.elc-r {
		margin: 0 70px;
	}
}
.el-col {
	border-radius: 4px;
}
.bg-purple-dark {
	background: #99a9bf;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
</style>
